* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eef1f5;
}
.loading {
    display: flex;
    @for $i from 1 through 6 {
        div:nth-child(#{$i})::before {
            animation-delay: $i * 0.3s;
        }
    }
    div {
        position: relative;
        width: 40px;
        height: 200px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #eef1f5);
        margin: 20px;
        border-radius: 20px;
        border: 2px solid #eef1f5;
        box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px 15px 20px #fff, inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            box-shadow: inset -1px -5px 5px rgba(0, 0, 0, 0.1), 0 420px 0 400px lightskyblue;
            animation: animate 2s ease-in-out infinite;
            // 初始化先向上移动160px
            transform: translateY(160px);
        }
    }
}

@keyframes animate {
    0% {
        transform: translateY(160px);
        filter: hue-rotate(0deg);
    }
    50% {
        transform: translateY(0px);
        filter: hue-rotate(180deg);
    }
    100% {
        transform: translateY(160px);
        filter: hue-rotate(360deg);
    }
}
